<template>
  <aside>
    <!-- 节点属性 -->
    <div>
      <ul>
        <li>
          <label>节点Id</label>
          <Input
            disabled
            v-model="content.id"
            placeholder="Enter something..."
            style="width: 100%"
          />
        </li>
        <li>
          <label>节点类型</label>
          <Input
            disabled
            v-model="content.type"
            placeholder="Enter something..."
            style="width: 100%"
          />
        </li>
        <li>
          <label>节点名称</label>
          <Input
            v-model="content.name"
            placeholder="Enter something..."
            style="width: 100%"
          />
        </li>
        <li>
          <label>数据源</label>
          <el-select v-model="content.dataSourceId" placeholder="默认与系统同源" clearable>
            <el-option
                    v-for="item in dataSourceIdOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
            </el-option>
          </el-select>
        </li>
        <li>
          <label>SQL查询语句
            <el-tooltip class="item" effect="light" placement="right">
              <template slot="content">
                SQL: <br/>
                select * from ttf_test_script where name = %${param2.name}%;
              </template>
              <i class="el-icon-warning"></i>
            </el-tooltip>
          </label>
          <el-input
            type="textarea"
            :rows="8"
            v-model="content.sql"
            style="width: 100%"
          />
        </li>
        <li>
          <label>数据存入变量
            <el-tooltip class="item" effect="light" placement="right">
              <template slot="content">
                填写此项：下一节点必须是'数据汇聚'节点，由'数据汇聚'节点将数据存入全局变量dataList中; <br/>
                不填此项：数据将默认存入全局变量dataList中。
              </template>
              <i class="el-icon-warning"></i>
            </el-tooltip>
          </label>
          <Input
              v-model="content.defineVarName"
              placeholder="必须通过'数据汇聚'节点，将数据存入全局变量: dataList"
              style="width: 100%"
          />
        </li>
        <li>
          <label>节点描述</label>
          <el-input
                  type="textarea"
                  :rows="2"
                  v-model="content.description"
                  style="width: 100%"
          />
        </li>
      </ul>
    </div>
  </aside>
</template>

<script>
import {fetchList} from '@/views/flow/taskflow/task/taskFlowDs/api'
export default {
  name: "InJdbcAttr",
  props: {
    selectContent:Object
  },
  data() {
    return {
      content: {},
      type: "",
      jspInit: this.$store.state.taskflow.jspInit,
      dataSourceIdOptions:[]
    };
  },
  watch:{
    selectContent: {
      handler(nval) {
        if (!nval) {
          return
        }
        this.content = nval.data;
        this.type = nval.type;
      },
      immediate: true
    }
  },
  mounted() {
    this.fetchDataSourceIdOptions()
  },
  methods: {
    fetchDataSourceIdOptions(){
      const query = {}
      query.page=1
      query.limit=10000
      query.sort='-id'
      fetchList(query).then(r=>{
        this.dataSourceIdOptions = r.map.rows
      })
    }
  },
};
</script>

<style scoped lang="scss">
aside {
  padding: 10px;
  ul {
    list-style: none;
    li {
      margin-bottom: 5px;
      > label {
        display: block;
        font-size: 15px;
        font-weight: normal;
        margin-bottom: 2px;
      }
    }
  }
}
</style>
